<template>

  <!-- 客户详情表单 -->
  <el-form label-width="110px">

    <!-- ID -->
    <el-form-item label="ID">
      <div class="detail">&nbsp; {{ this.customerDetail.id }}</div>
    </el-form-item>

    <!-- 负责人 -->
    <el-form-item label="负责人">
      <div class="detail">&nbsp; {{ this.customerDetail.ownerDO.name }}</div>
    </el-form-item>

    <!-- 所属活动 -->
    <el-form-item label="所属活动">
      <div class="detail">&nbsp; {{ this.customerDetail.activityDO.name }}</div>
    </el-form-item>

    <!-- 姓名 -->
    <el-form-item label="姓名">
      <div class="detail">&nbsp; {{ this.customerDetail.clueDO.fullName }}</div>
    </el-form-item>

    <!-- 称呼 -->
    <el-form-item label="称呼">
      <div class="detail">&nbsp; {{ this.customerDetail.appellationDO.typeValue }}</div>
    </el-form-item>

    <!-- 手机 -->
    <el-form-item label="手机">
      <div class="detail">&nbsp; {{ this.customerDetail.clueDO.phone }}</div>
    </el-form-item>

    <!-- 微信 -->
    <el-form-item label="微信">
      <div class="detail">&nbsp; {{ this.customerDetail.clueDO.weixin }}</div>
    </el-form-item>

    <!-- qq -->
    <el-form-item label="qq">
      <div class="detail">&nbsp; {{ this.customerDetail.clueDO.qq }}</div>
    </el-form-item>

    <!-- 邮箱 -->
    <el-form-item label="邮箱">
      <div class="detail">&nbsp; {{ this.customerDetail.clueDO.email }}</div>
    </el-form-item>

    <!-- 年龄 -->
    <el-form-item label="年龄">
      <div class="detail">&nbsp; {{ this.customerDetail.clueDO.age }}</div>
    </el-form-item>

    <!-- 职业 -->
    <el-form-item label="职业">
      <div class="detail">&nbsp; {{ this.customerDetail.clueDO.job }}</div>
    </el-form-item>

    <!-- 年收入 -->
    <el-form-item label="年收入">
      <div class="detail">&nbsp; {{ this.customerDetail.clueDO.yearIncome }}</div>
    </el-form-item>

    <!-- 住址 -->
    <el-form-item label="住址">
      <div class="detail">&nbsp; {{ this.customerDetail.clueDO.address }}</div>
    </el-form-item>

    <!-- 贷款 -->
    <el-form-item label="贷款">
      <div class="detail">&nbsp; {{ this.customerDetail.needLoanDO.typeValue }}</div>
    </el-form-item>

    <!-- 意向状态 -->
    <el-form-item label="意向状态">
      <div class="detail">&nbsp; {{ this.customerDetail.intentionStateDO.typeValue }}</div>
    </el-form-item>

    <!-- 线索状态 -->
    <el-form-item label="线索状态">
      <div class="detail">&nbsp; {{ this.customerDetail.stateDO.typeValue }}</div>
    </el-form-item>

    <!-- 线索来源 -->
    <el-form-item label="线索来源">
      <div class="detail">&nbsp; {{ this.customerDetail.sourceDO.typeValue }}</div>
    </el-form-item>

    <!-- 意向产品 -->
    <el-form-item label="意向产品">
      <div class="detail">&nbsp; {{ this.customerDetail.productDO.name }}</div>
    </el-form-item>

    <!-- 客户描述 -->
    <el-form-item label="客户描述">
      <div class="detail">&nbsp; {{ this.customerDetail.description }}</div>
    </el-form-item>

    <!-- 下次联系时间 -->
    <el-form-item label="下次联系时间">
      <div class="detail">&nbsp; {{ this.customerDetail.nextContactTime }}</div>
    </el-form-item>

    <!-- 创建者 -->
    <el-form-item label="创建者">
      <div class="detail">&nbsp; {{ this.customerDetail.createByDO.name }}</div>
    </el-form-item>

    <!-- 创建时间 -->
    <el-form-item label="创建时间">
      <div class="detail">&nbsp; {{ this.customerDetail.createTime }}</div>
    </el-form-item>

    <!-- 编辑者 -->
    <el-form-item label="编辑者">
      <div class="detail">&nbsp; {{ this.customerDetail.editByDO.name }}</div>
    </el-form-item>

    <!-- 编辑时间 -->
    <el-form-item label="编辑时间">
      <div class="detail">&nbsp; {{ this.customerDetail.editTime }}</div>
    </el-form-item>

  </el-form>

  <!-- 客户备注表单 -->
  <el-form label-width="110px" :model="this.customerRemarkQuery" :rules="customerRemarkRules" ref="customerRemarkRefForm">

    <!-- 填写备注 -->
    <el-form-item label="填写备注" prop="noteContent">
      <el-input v-model.trim="this.customerRemarkQuery.noteContent"
                type="textarea"
                :rows="6" />
    </el-form-item>

    <!-- 联系方式 -->
    <el-form-item label="联系方式" prop="noteWay">
      <el-select v-model="this.customerRemarkQuery.noteWay" placeholder="请选择联系方式">
        <el-option v-for="noteWay in this.noteWayOptions"
                   :key="noteWay.id"
                   :label="noteWay.typeValue"
                   :value="noteWay.id" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="customerRemarkSubmit()">提交</el-button>
      <el-button type="success" @click="createTran()">创建交易</el-button>
      <el-button @click="goBack()">返回</el-button>
    </el-form-item>

  </el-form>

  <!-- 客户备注列表 -->
  <!-- :data="customerRemarkList"  单向绑定表格数据 -->
  <el-table
      :data="customerRemarkList"
      style="width: 100%">

    <!-- type="index"  序号以1递增 -->
    <el-table-column type="index" label="序号" width="80px" />
    <el-table-column property="noteWayDO.typeValue" label="联系方式" width="120" />
    <el-table-column property="noteContent" label="备注" width="380" />
    <el-table-column property="createTime" label="联系时间" />
    <el-table-column property="createByDO.name" label="联系者" />
    <el-table-column property="editTime" label="编辑时间" />
    <el-table-column property="editByDO.name" label="编辑者" />
    <el-table-column label="操作">
      <!-- 作用域插槽 -->
      <template #default="scope">
        <!-- scope.row     获取当前行上的数据对象 -->
        <el-button type="success" @click="edit(scope.row)">编辑</el-button>
        <!-- scope.row.id  获取当前行上数据对象的id -->
        <el-button type="danger"  @click="remove(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页功能 -->
  <!--
      layout="prev, pager, next"  组件布局，子组件名用逗号分隔  prev, pager, next, jumper, ->, total
      @prev-click="toPage" 点击上一页触发函数
      @next-click="toPage" 点击下一页触发函数
      @current-change="toPage"  当前页发生改变时触发函数
      注意：这里的函数不要加括号，element-plus会自动传递一个参数（当前页数）
  -->
  <el-pagination
      background
      layout="prev, pager, next"
      :page-size="this.pageSize"
      :total="this.total"
      @prev-click="toPage"
      @next-click="toPage"
      @current-change="toPage"/>

  <!-- 编辑客户备注的弹窗（对话框） -->
  <!--
    v-model                值为true时，显示对话框，false隐藏对话框
    center                 内容居中
    draggable              可拖拽的对话框
    :close-on-click-modal  是否可以通过点击对话框外的页面关闭对话框
    :destroy-on-close      对话框关闭时，是否销毁其中元素（例如：验证规则的提示信息）
    :show-close            是否显示关闭（×号）按钮
  -->
  <el-dialog
      v-model="editCustomerRemarkDialogVisible"
      title="编辑线索备注"
      width="55%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :show-close="false">

    <!-- :model       表单绑定的数据 -->
    <!-- label-width  表单整体距离左侧的宽度 -->
    <!-- :rules       绑定验证规则 -->
    <!-- ref          表单提交之前验证表单的验证规则 -->
    <el-form :model="customerRemarkQuery" label-width="110px" :rules="editCustomerRemarkRules" ref="editCustomerRemarkRefForm">
      <!-- 备注 -->
      <el-form-item label="备注" prop="noteContent">
        <el-input type="textarea" :rows="6" v-model.trim="customerRemarkQuery.noteContent" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="editCustomerRemarkSubmit()">提交</el-button>
        <el-button @click="editCustomerRemarkDialogVisibleClose()">关闭</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 创建交易的弹窗（对话框） -->
  <!--
    v-model                值为true时，显示对话框，false隐藏对话框
    center                 内容居中
    draggable              可拖拽的对话框
    :close-on-click-modal  是否可以通过点击对话框外的页面关闭对话框
    :destroy-on-close      对话框关闭时，是否销毁其中元素（例如：验证规则的提示信息）
    :show-close            是否显示关闭（×号）按钮
  -->
  <el-dialog
      v-model="createTranDialogVisible"
      title="创建交易"
      width="55%"  center  draggable
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :show-close="false">

    <!-- :model       表单绑定的数据 -->
    <!-- label-width  表单整体距离左侧的宽度 -->
    <!-- :rules       绑定验证规则 -->
    <!-- ref          表单提交之前验证表单的验证规则 -->
    <el-form :model="tranQuery" label-width="110px" :rules="tranQueryRules" ref="tranQueryRefForm">

      <!-- 交易金额 -->
      <!-- prop="money" 要验证的内容 -->
      <el-form-item label="交易金额" prop="money">
        <el-input v-model="tranQuery.money" placeholder="请输入交易金额" />
      </el-form-item>

      <!-- 交易描述 -->
      <el-form-item label="交易描述" prop="description">
        <el-input type="textarea" :rows="6" v-model.trim="tranQuery.description" />
      </el-form-item>

      <!-- 预计成交日期 -->
      <el-form-item label="预计成交日期" prop="expectedDate">
        <!-- type="datetime"  日期选择器的类型（样式） -->
        <!-- value-format     绑定值的格式，向后端提交的格式 -->
        <!-- :disabled-date   禁用指定日期之前或之后的日期，绑定的函数会自动传入一个参数，所以不要加括号 -->
        <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
        <el-date-picker
            v-model="tranQuery.expectedDate"
            type="datetime"
            placeholder="请选择预计成交日期"
            :disabled-date="disabledDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
            style="width: 100%;"/>
      </el-form-item>

      <!-- 下次联系时间 -->
      <el-form-item label="下次联系时间" prop="nextContactTime">
        <!-- type="datetime"  日期选择器的类型（样式） -->
        <!-- value-format     绑定值的格式，向后端提交的格式 -->
        <!-- :disabled-date   禁用指定日期之前或之后的日期，绑定的函数会自动传入一个参数，所以不要加括号 -->
        <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
        <el-date-picker
            v-model="tranQuery.nextContactTime"
            type="datetime"
            placeholder="请选择下次联系时间"
            :disabled-date="disabledDate"
            value-format="YYYY-MM-DD HH:mm:ss"
            clearable
            style="width: 100%;"/>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="createTranSubmit()">提交</el-button>
        <el-button @click="createTranClose()">关闭</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script>
import {doDelete, doGet, doPost, doPut} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";

  export default {
    name: "CustomerDetailView",

    // 注入父路由的函数
    inject: ['reload'],

    data() {
      return {
        // 客户详情对象
        customerDetail: {
          clueDO: { },            // 线索
          ownerDO: { },           // 负责人
          activityDO: { },        // 市场活动
          productDO: { },         // 产品
          appellationDO: { },     // 称呼
          needLoanDO: { },        // 贷款
          intentionStateDO: { },  // 意向状态
          stateDO: { },           // 线索状态
          sourceDO: { },          // 线索来源
          createByDO: { },        // 创建者
          editByDO: { }           // 编辑者
        },

        // 客户备注对象
        customerRemarkQuery: { },

        // 联系方式下拉选项
        noteWayOptions: [],

        // 客户备注表单验证规则
        customerRemarkRules: {
          // 备注
          noteContent: [
            { required: true, message: '请输入备注内容', trigger: 'blur' },
            { min: 5, max: 255, message: '备注内容字数在5-255之间', trigger: 'blur' }
          ],
          // 联系方式
          noteWay: [
            { required: true, message: '请选择联系方式', trigger: 'blur' }
          ]
        },

        // 客户备注列表对象
        customerRemarkList: [
          {
            noteWayDO: {},
            createByDO: {},
            editByDO: {}
          }
        ],

        pageSize: 0,  // 每页记录条数
        total: 0,     // 总记录条数

        // 编辑备注对话框是否显示
        editCustomerRemarkDialogVisible: false,

        // 编辑备注表单的验证规则
        editCustomerRemarkRules: {
          // 备注
          noteContent: [
            { required: true, message: '请输入备注内容', trigger: 'blur' },
            { min: 5, max: 255, message: '备注内容字数在5-255之间', trigger: 'blur' }
          ]
        },

        // 创建交易对话框是否显示
        createTranDialogVisible: false,

        // 交易对象
        tranQuery: { },

        // 创建交易表单验证规则
        tranQueryRules: {
          // 交易金额
          money: [
            { required: true, message: '请输入交易金额', trigger: 'blur' },
            { pattern: /^[0-9]+(\.[0-9]{2})?$/, message: '交易金额必须是整数或者两位小数', trigger: 'blur' }
          ],
          // 交易描述
          description: [
            { required: true, message: '请输入交易描述', trigger: 'blur' },
            { min: 5, max: 255, message: '交易描述字数在5-255之间', trigger: 'blur' }
          ],
          // 预计成交日期
          expectedDate: [
            { required: true, message: '请选择预计成交日期', trigger: 'blur' }
          ],
          // 下次联系时间
          nextContactTime: [
            { required: true, message: '请选择下次联系时间', trigger: 'blur' }
          ]
        }
      }
    },

    // 钩子函数，页面渲染完成后自动执行
    mounted() {
      // 加载客户详情对象
      this.loadCustomerDetail();

      // 加载联系方式下拉选项
      this.loadNoteWayOptions();

      // 加载备注列表
      this.loadCustomerRemarkList(1);
    },

    methods: {
      // 加载客户详情对象
      loadCustomerDetail() {
        // 获取客户id
        let id = this.$route.params.id;
        // 向后端发送请求
        doGet("/api/customer/detail/" + id, { }).then( (resp) => {
          if (resp.data.code === 200) {
            // 将后端返回的数据赋值给客户详情对象
            this.customerDetail = resp.data.data;

            // 判断引用类型数据是否为null，为null则赋一个空值，避免使用的时候报错
            for (let field in this.customerDetail) {
              if (!this.customerDetail[field]) {
                this.customerDetail[field] = ''
              }
            }
          } else {
            messageTip("客户详情加载失败", "error");
          }
        })
      },

      // 加载联系方式下拉选项
      loadNoteWayOptions() {
        // 向后端发送请求
        doGet("/api/dicValue/loadNoteWay", { }).then( (resp) => {
          if (resp.data.code === 200) {
            this.noteWayOptions = resp.data.data;
          } else {
            messageTip("联系方式加载失败", "error");
          }
        })
      },

      // 加载备注列表
      loadCustomerRemarkList(current) {
        // 向后端发送请求
        doGet("/api/customer/remark/list", {
          // 根据客户id查询客户的备注
          customerId: this.$route.params.id,
          // 要查询第几页
          current: current
        }).then( (resp) => {
          if (resp.data.code === 200) {
            // 将后端返回的数据赋值给客户备注列表对象
            this.customerRemarkList = resp.data.data.list;
            // 设置分页参数
            this.pageSize = resp.data.data.pageSize;
            this.total = resp.data.data.total;
          } else {
            messageTip("备注加载失败", "error");
          }
        })
      },

      // 客户备注提交按钮
      customerRemarkSubmit() {
        // 验证表单规则
        this.$refs.customerRemarkRefForm.validate( (isValid) => {
          if (isValid) {
            // 向后端发送请求
            doPost("/api/customer/remark/add", {
              // 客户id
              customerId: this.$route.params.id,
              // 备注
              noteContent: this.customerRemarkQuery.noteContent,
              // 联系方式
              noteWay: this.customerRemarkQuery.noteWay
            }).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("编辑成功", "success");
                // 刷新页面
                this.reload();
              } else {
                messageTip("编辑失败", "error");
              }
            })
          }
        })
      },

      // 创建交易按钮
      createTran() {
        // 弹出创建交易对话框
        this.createTranDialogVisible = true;
      },

      // 禁用指定日期选择
      disabledDate(time) {
        // 今天之前的日期禁止选择（今天可选）
        return time.getTime() < Date.now() - 8.64e7;
      },

      // 创建交易 提交按钮
      createTranSubmit() {
        // 验证表单规则
        this.$refs.tranQueryRefForm.validate( (isValid) => {
          if (isValid) {
            // 验证通过

            // 使用FormData对象传参
            let formData = new FormData();
            // 客户id
            formData.append("customerId", this.$route.params.id);
            // 取出tranQuery对象的内容，添加formData对象
            for (let filed in this.tranQuery) {
              formData.append(filed, this.tranQuery[filed]);
            }

            // 向后端发送请求
            doPost("/api/tran/add", formData).then( (resp) => {
              if (resp.data.code === 200) {
                messageTip("创建成功", "success");
                // 刷新页面
                this.reload();
              } else {
                messageTip("创建失败", "error");
              }
            })
          }
        })
      },

      // 创建交易 关闭按钮
      createTranClose() {
        // 清空交易对象内容
        this.tranQuery = { };
        // 关闭对话框
        this.createTranDialogVisible = false;
      },

      // 返回按钮
      goBack() {
        // 返回上一级路由
        this.$router.go(-1);
      },

      // 备注编辑按钮
      edit(customerRemark) {
        // 将备注内容显示到对话框中
        this.customerRemarkQuery.id = customerRemark.id;
        this.customerRemarkQuery.noteContent = customerRemark.noteContent;
        // 弹出对话框
        this.editCustomerRemarkDialogVisible = true;
      },

      // 编辑备注 提交按钮
      editCustomerRemarkSubmit() {
        // 验证表单规则
        this.$refs.editCustomerRemarkRefForm.validate( (isValid) => {
          // 向后端发送请求
          doPut("/api/customer/remark/edit", {
            // 备注的id
            id: this.customerRemarkQuery.id,
            // 备注内容
            noteContent: this.customerRemarkQuery.noteContent
          }).then( (resp) => {
            if (resp.data.code === 200) {
              messageTip("编辑成功", "success");
              // 关闭对话框
              this.editCustomerRemarkDialogVisible = false;
              // 刷新页面
              this.reload();
            } else {
              messageTip("编辑失败", "error");
            }
          })
        })
      },

      // 编辑备注 关闭按钮
      editCustomerRemarkDialogVisibleClose() {
        // 将备注对象内容清空
        this.customerRemarkQuery = { };

        // 关闭对话框
        this.editCustomerRemarkDialogVisible = false;
      },

      // 备注删除按钮（逻辑删除）
      remove(id) {
        // 弹出确认框
        messageConfirm("确认删除这条记录吗?").then(() => {
          // 向后端发送请求
          doDelete("/api/customer/remark/remove/" + id, { }).then ( (resp) => {
            if (resp.data.code === 200) {
              messageTip("删除成功", "success");
              // 刷新页面
              this.reload();
            } else {
              messageTip("删除失败", "error");
            }
          })
        }).catch(() => {
          messageTip("取消删除", "warning");
        })
      },

      // 分页页码按钮
      toPage(current) {
        // 会自动传来一个参数（要跳转的页码数）
        // 点击页码后，重新加载跟踪记录列表
        this.loadCustomerRemarkList(current);
      }
    }
  }
</script>

<style scoped>

  .detail {
    height: 30px;
    width: 100%;
    background-color: #f6f7fb;    /* 背景色 */
    padding-left: 2px;            /* 左侧内边距 */
    border: 1px solid #e6e7eb;    /* 1px 边框宽度， solid 实线边框， #e6e7eb 边框颜色 */
    border-radius: 4px;           /* 边框角的弧度 */
  }

  /* 客户备注列表 */
  .el-table {
    margin-top: 20px;  /* 上侧外边距 */
  }

  /* 分页栏 */
  .el-pagination {
    margin-top: 20px;  /* 上侧外边距 */
  }

</style>

